<template>
<!-- 薪酬明细 -->
  <div class="wise-salary-list">
    <van-row style="background: #FFF">
      <van-col span="12">
        <div class="login-name">{{ loginName }}（{{ loginId }}）</div>
      </van-col>
      <van-col span="12">
        <date-time ref="dataTimeRefmonth" datetype="year-month" @date="handleChangeMonth"/>
      </van-col>
    </van-row>
    <integral-pie ref="integralPieRef" />
    <div class="salary-rule">
      <div class="title">薪酬规则：</div>
      <div v-if="info.CALC_TYPE_NAME === '小CEO'" class="rule">
        小CEO薪酬总额 = 小CEO基础绩效 + 个人增量分享 + 团队调整薪酬 + 个人调整薪酬 - 团队负面清单 - 个人负面清单 + 政企项目制激励薪酬
      </div>
      <div v-else-if="info.CALC_TYPE_NAME === '综合营销经理'" class="rule">
        综合营销经理薪酬 = 基础绩效80% + 发展绩效80% + 个人增量分享 + 小CEO分配绩效 + 团队调整薪酬 + 个人调整薪酬 - 团队负面清单 - 个人负面清单 + 政企项目制激励薪酬
      </div>
      <div v-else-if="info.CALC_TYPE_NAME === '智慧家庭工程师'" class="rule">
        智慧家庭工程师薪酬 = 基础维护绩效80% + 交付绩效80% + 发展奖励80% + 个人增量分享 + 团队调整薪酬 + 个人调整薪酬 - 团队负面清单 - 个人负面清单 + 政企项目制激励薪酬
      </div>
      <div v-else class="rule">
        综合支撑经理薪酬 = 基础绩效80% + 个人增量分享 + 小CEO分配绩效 + 团队调整薪酬 + 个人调整薪酬 - 团队负面清单 - 个人负面清单 + 政企项目制激励薪酬
      </div>
    </div>
    <div class="detail-info" v-show="JSON.stringify(info) != '{}'">
      <div>
        <div class="info-tc" v-if="info.CALC_TYPE_NAME === '小CEO'">
          <div class="info-desc">小CEO基础绩效<span>{{ info.ACH_BASE_CEO || 0 }}</span></div>
          <div class="info-desc">个人增量分享<span>{{ info.SAL_ACH_GRAB || 0 }}</span></div>
          <div class="info-desc">团队调整薪酬<span>{{ info.SAL_GRO_TEAM || 0 }}</span></div>
          <div class="info-desc">个人调整薪酬<span>{{ info.SAL_GRO_PERS || 0 }}</span></div>
          <div class="info-desc">团队负面清单<span>{{ info.SAL_NEG_TEAM || 0 }}</span></div>
          <div class="info-desc">个人负面清单<span>{{ info.SAL_NEG_PERS || 0 }}</span></div>
          <div class="info-desc">政企项目制激励薪酬<span>{{ info.SAL_PM || 0 }}</span></div>
        </div>
        <div class="info-tc" v-else-if="info.CALC_TYPE_NAME === '综合营销经理'">
          <div class="info-desc">基础绩效80%<span>{{ info.SAL_ACH_BASE_ZX || 0 }}</span></div>
          <div class="info-desc">发展绩效80%<span>{{ info.SAL_ACH_DEV_ZX || 0 }}</span></div>
          <div class="info-desc">个人增量分享<span>{{ info.SAL_ACH_GRAB || 0 }}</span></div>
          <div class="info-desc">小CEO分配绩效<span>{{ info.SAL_ACH_BASE_FP || 0 }}</span></div>
          <div class="info-desc">团队调整薪酬<span>{{ info.SAL_GRO_TEAM || 0 }}</span></div>
          <div class="info-desc">个人调整薪酬<span>{{ info.SAL_GRO_PERS || 0 }}</span></div>
          <div class="info-desc">团队负面清单<span>{{ info.SAL_NEG_TEAM || 0 }}</span></div>
          <div class="info-desc">个人负面清单<span>{{ info.SAL_NEG_PERS || 0 }}</span></div>
          <div class="info-desc">政企项目制激励薪酬<span>{{ info.SAL_PM || 0 }}</span></div>
        </div>
        <div class="info-tc" v-else-if="info.CALC_TYPE_NAME === '智慧家庭工程师'">
          <div class="info-desc">基础维护绩效80%<span>{{ info.SAL_ACH_WH_ZX || 0 }}</span></div>
          <div class="info-desc">交付绩效80%<span>{{ info.SAL_ACH_JF_ZX || 0 }}</span></div>
          <div class="info-desc">发展奖励80%<span>{{ info.SAL_ACH_DEV_ZX || 0 }}</span></div>
          <div class="info-desc">个人增量分享<span>{{ info.SAL_ACH_GRAB || 0 }}</span></div>
          <div class="info-desc">团队调整薪酬<span>{{ info.SAL_GRO_TEAM || 0 }}</span></div>
          <div class="info-desc">个人调整薪酬<span>{{ info.SAL_GRO_PERS || 0 }}</span></div>
          <div class="info-desc">团队负面清单<span>{{ info.SAL_NEG_TEAM || 0 }}</span></div>
          <div class="info-desc">个人负面清单<span>{{ info.SAL_NEG_PERS || 0 }}</span></div>
          <div class="info-desc">政企项目制激励薪酬<span>{{ info.SAL_PM || 0 }}</span></div>
        </div>
        <div class="info-tc" v-else-if="info.CALC_TYPE_NAME === '综合支撑'">
          <div class="info-desc">基础绩效80%<span>{{ info.SAL_ACH_ZC_ZX || 0 }}</span></div>
          <div class="info-desc">个人增量分享<span>{{ info.SAL_ACH_GRAB || 0 }}</span></div>
          <div class="info-desc">小CEO分配绩效<span>{{ info.SAL_ACH_BASE_FP || 0 }}</span></div>
          <div class="info-desc">团队调整薪酬<span>{{ info.SAL_GRO_TEAM || 0 }}</span></div>
          <div class="info-desc">个人调整薪酬<span>{{ info.SAL_GRO_PERS || 0 }}</span></div>
          <div class="info-desc">团队负面清单<span>{{ info.SAL_NEG_TEAM || 0 }}</span></div>
          <div class="info-desc">个人负面清单<span>{{ info.SAL_NEG_PERS || 0 }}</span></div>
          <div class="info-desc">政企项目制激励薪酬<span>{{ info.SAL_PM || 0 }}</span></div>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
import dateTime from '@/components/common/dateTime.vue'
import { accountDate } from '@/api/common.js'
import * as dayjs from "dayjs"
import integralPie from '@/views/components/publicline/wise/pie.vue'

import { salaryList } from '@/api/publicline/wise.js'

export default {
  components: { dateTime, integralPie },
  data() {
    return {
      monthId: '',
      loginName: '',
      info: {},
    }
  },
  created() {
    this.monthId = this.$route.query.time
    this.loginId = this.$route.query.loginId
    this.loginName = this.$route.query.loginName
  },
  mounted() {
    this.getAccountMonthDate()
    this.getMonthPie()
  },
  methods: {
    // 获取月账期
    async getAccountMonthDate() {
      const res = await accountDate({ PARAMCODE: 'M' })
      const { result, success } = res
      if (success) {
        this.$refs.dataTimeRefmonth.initDateTime(dayjs(this.monthId).format('YYYY-MM'), dayjs(result[0].value).format('YYYY-MM'))
      }
    },
    handleChangeMonth(val) {
      this.monthId = dayjs(val).format('YYYYMM')
      this.getMonthPie()
    },
    async getMonthPie() {
      const res = await salaryList({ loginId: this.loginId, monthId: this.monthId})
      const { result, success } = res
      if(success) {
        this.info = result[0] || {}
        let data = []
        if(this.info.CALC_TYPE_NAME === '综合营销经理') {
          data = [
            { value: this.info.SAL_ACH_BASE_ZX || 0, name: '基础绩效80%' },
            { value: this.info.SAL_ACH_DEV_ZX || 0, name: '发展绩效80%' },
            { value: this.info.SAL_ACH_GRAB || 0, name: '个人增量分享' },
            { value: this.info.SAL_ACH_BASE_FP || 0, name: '小CEO分配绩效' },
            { value: this.info.SAL_GRO_TEAM || 0, name: '团队调整薪酬' },
            { value: this.info.SAL_GRO_PERS || 0, name: '个人调整薪酬' },
            { value: this.info.SAL_NEG_TEAM || 0, name: '团队负面清单' },
            { value: this.info.SAL_NEG_PERS || 0, name: '个人负面清单' },
          ]
        } else if(this.info.CALC_TYPE_NAME === '智慧家庭工程师') {
          data = [
            { value: this.info.SAL_ACH_WH_ZX || 0, name: '基础维护绩效80%' },
            { value: this.info.SAL_ACH_JF_ZX || 0, name: '交付绩效80%' },
            { value: this.info.SAL_ACH_DEV_ZX || 0, name: '发展奖励80%' },
            { value: this.info.SAL_ACH_GRAB || 0, name: '个人增量分享' },
            { value: this.info.SAL_GRO_TEAM || 0, name: '团队调整薪酬' },
            { value: this.info.SAL_GRO_PERS || 0, name: '个人调整薪酬' },
            { value: this.info.SAL_NEG_TEAM || 0, name: '团队负面清单' },
            { value: this.info.SAL_NEG_PERS || 0, name: '个人负面清单' },
          ]
        } else if(this.info.CALC_TYPE_NAME === '小CEO') {
          data = [
            { value: this.info.ACH_BASE_CEO || 0, name: '小CEO基础绩效' },
            { value: this.info.SAL_ACH_GRAB || 0, name: '个人增量分享' },
            { value: this.info.SAL_GRO_TEAM || 0, name: '团队调整薪酬' },
            { value: this.info.SAL_GRO_PERS || 0, name: '个人调整薪酬' },
            { value: this.info.SAL_NEG_TEAM || 0, name: '团队负面清单' },
            { value: this.info.SAL_NEG_PERS || 0, name: '个人负面清单' },
          ]
        } else {
          data = [
            { value: this.info.SAL_ACH_ZC_ZX || 0, name: '基础绩效80%' },
            { value: this.info.SAL_ACH_GRAB || 0, name: '个人增量分享' },
            { value: this.info.SAL_ACH_BASE_FP || 0, name: '小CEO分配绩效' },
            { value: this.info.SAL_GRO_TEAM || 0, name: '团队调整薪酬' },
            { value: this.info.SAL_GRO_PERS || 0, name: '个人调整薪酬' },
            { value: this.info.SAL_NEG_TEAM || 0, name: '团队负面清单' },
            { value: this.info.SAL_NEG_PERS || 0, name: '个人负面清单' },
          ]
        }
      
        this.$refs.integralPieRef.initPie(this.info.SAL || 0 , data, '薪酬总额')
      }
    },
  }

}
</script>
<style lang="less" scoped>
@import '~@/assets/less/person.less';
.login-name {
  padding: 12px 16px;
}
.salary-rule {
  background: #fff;
  box-shadow: 0 2px 4px 1px #f3f7fa;
  border-radius: 6px;
  margin: 0 8px 6px;
  padding: 10px 14px;
  font-size: 13px;
  .title {
    color: #fc5351;
    margin-bottom: 4px;
  }
  .rule {
    color: #666;
  }
}
.detail-info {
  align-items: flex-start;
  .info-tc {
    flex-wrap: wrap;
    text-align: center;
  }
  .info-desc {
    width: 48%;
    border-bottom: 1px solid #f3f7fa;
    padding: 8px 2px;
    display: flex;
    flex-direction: column;
    > span {
      padding-top: 6px;
      font-size: 16px;
    }
  }
}
.wise-salary-list {
  .charts {
    background: #fff;
    margin-bottom: 10px
  }
}
</style>
